﻿<div class="content-wrap research-listings">
    <div sustainalytics-navigation-menu navigation-menu-templateurl="Views/Menu/PageMenu.html" navigation-menu-sitemap="SITE" navigation-menu-startnodelevel="2" navigation-menu-levels="3"></div>
    <div class="content">
        <div class="content-pad">
            <!--<div class="page-title">Portfolio</div>-->
            <div class="left-content">
                <div class="title-company-arrows editable" ng-show="!portfolioOverview.isRenamingPortfolioName" ng-click="portfolioOverview.changeIsRenaming()" style="word-break: break-all;">{{portfolioOverview.portfolio.name}}</div>
                <div ng-show="portfolioOverview.isRenamingPortfolioName">
                    <input type="text" class="editable-title-inp" ng-model="portfolioOverview.newNamePortfolio" />
                    <div class="editable-title-buttons">
                        <button class="editable-title-save" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio || portfolioOverview.newNamePortfolio.length > 100 " ng-click="portfolioOverview.renamePortfolio(portfolioOverview.newNamePortfolio)"></button>
                        <button class="editable-title-clear" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" ng-click="portfolioOverview.changeIsRenaming()"></button>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="table">
                    <div class="table-row odd">
                        <div class="table-cell width_290" style="border-top: none;"># of holdings</div>
                        <div class="table-cell center-align" style="border-top: none;"><b>{{portfolioOverview.portfolio.companyCount}}</b></div>
                    </div>
                    <!--<div class="table-row">
                <div class="table-cell width_290">Alerts</div>
                <div class="table-cell center-align"><a href="" class="disabled">Enabled</a></div>
            </div>-->
                </div>
                <div style="margin-top: 30px;">
                    <!--<input type="button" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio" value="Add Security" class="btn-green" style="min-width: 130px; width: 130px;">-->
                    <input type="button" value="Export" ng-click="portfolioOverview.addTaskExportPortfolio()" class="btn-green" style="min-width: 130px; width: 130px;">
                </div>
            </div>
            <div class="right-content">

                <div class="clear">&nbsp;</div><br />
                <div style="float: right; width: 305px;">
                    <div class="float_16_left black">Portfolio last edited:</div>
                    <div class="float_16_right green">{{portfolioOverview.portfolio.dateModified | date: 'MMM d, y'}} </div>
                    <div class="clear">&nbsp;</div>
                    <div class="float_16_left black">Portfolio created by:</div>
                    <div class="float_16_right green">{{portfolioOverview.portfolio.addedByFullName}}</div>
                    <div class="clear">&nbsp;</div>
                    <div class="float_16_left black">Sharing</div>
                    <div class="float_16_right green">
                        <div style="display: inline-block;">
                            <div ng-init="true" ng-switch on="portfolioOverview.portfolio.sharingStatus === 1 ? true : false">
                                <button ng-switch-when='true' ng-disabled="!portfolioOverview.portfolio.isMyPortfolio || portfolioOverview.portfolio.isSystemPortfolio " ng-click='portfolioOverview.setShared(portfolioOverview.portfolio)' class="switch-btn">Off</button>
                                <button ng-switch-when='false' ng-disabled="!portfolioOverview.portfolio.isMyPortfolio || portfolioOverview.portfolio.isSystemPortfolio" ng-click='portfolioOverview.setPrivate(portfolioOverview.portfolio)' class="switch-btn_on">On</button>
                            </div>
                        </div>
                    </div>
                    <div class="clear">&nbsp;</div>
                </div>
            </div>
            <div class="clear">&nbsp;</div><br /><br />


            <!-- BUTTON FOR SYSTEM PORTFOLIO EDIT -->
            <div style="float: right; margin-bottom: 10px;">
                <input type="button" ng-show="portfolioOverview.portfolio.isMyPortfolio && portfolioOverview.portfolio.isSystemPortfolio " value="Edit Portfolio" class="btn-green" style="margin-top: 0;" ng-click="portfolioOverview.openAddPortfolioPopup()">
            </div>
            <!-- BUTTON FOR SYSTEM PORTFOLIO EDIT -->
            
            <div style="float: right; margin-bottom: 10px;">
                <input type="button" ng-show="portfolioOverview.isEditButtonVisible" value="Edit Portfolio Weights" class="btn-green" style="margin-top: 0;" ng-click="portfolioOverview.editWeight()">
                <input type="button" value="Save" class="btn-green" style="margin-top: 0;" ng-show="portfolioOverview.isChangingSecurityWeight" ng-click="portfolioOverview.saveWeightChanges()">
                <input type="button" value="Cancel" class="btn-green" style="margin-top: 0;" ng-show="portfolioOverview.isChangingSecurityWeight" ng-click="portfolioOverview.cancelWeightChanges()">
            </div>

            <div class="clear"></div>
            <div class="table">
                <div class="table-row">
                    <div class="table-head width_290" style="width: 500px;">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('DisplayInfo.CustomSecurityIdentifierName');" ng-class="portfolioOverview.orderByCol === 'DisplayInfo.CustomSecurityIdentifierName' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Security Name</a>
                    </div>
                    <div class="table-head width_290" style="width: 500px;">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('DisplayInfo.SecurityIdentifier');" ng-class="portfolioOverview.orderByCol === 'DisplayInfo.SecurityIdentifier' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Security ID</a>
                    </div>
                    <div class="table-head width_290" style="width: 500px;">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('SecurityWeight');" ng-class="portfolioOverview.orderByCol === 'SecurityWeight' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Security Weight</a>
                    </div>
                    <div class="table-head width_290" style="width: 500px;">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('CompanyNameLowercase');" ng-class="portfolioOverview.orderByCol === 'CompanyNameLowercase' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Matched Company Name</a>
                    </div>
                    <div class="table-head width_290">
                        <a href="" ng-click="portfolioOverview.setOrderByCol('MatchedInfo.CapitalIQId');" ng-class="portfolioOverview.orderByCol === 'MatchedInfo.CapitalIQId' ? (portfolioOverview.orderByAsc ? 'sortable_up' : 'sortable_down') : null">Matched Company ID</a>
                    </div>
                    <div class="table-head width_290">
                        <a href="">Details</a>
                    </div>
                    <div class="table-head center-align width_130" style="width: 60px; vertical-align: top;">
                        <a href="">Delete</a>
                    </div>
                </div>
                <div class="{{$index % 2==1 ? 'table-row odd': 'table-row'}}" ng-repeat="item in portfolioOverview.portfolioCompanyList">
                    <div class="table-cell width_290" ng-class="{'last':$last}" style="border-left: 1px solid #e0e0e0;">
                        {{item.displayInfo.customSecurityIdentifierName}}
                    </div>

                    <div class="table-cell width_290" ng-class="{'last':$last}" style="width: 210px;">
                        {{item.displayInfo.securityIdentifier}}
                    </div>

                    <!--edit securityWeight-->
                    <div class="table-cell width_200">
                        <div data-ng-attr-id="objId" ng-show="!portfolioOverview.isChangingSecurityWeight" style="word-break: break-all;">{{item.securityWeight || "&nbsp"}}</div>
                        <div ng-show="portfolioOverview.isChangingSecurityWeight && item.isAccesible">
                            <input type="text" class="editable-title-inp-small" ng-model="item.securityWeight" />
                            <div class="clear"></div>
                        </div>
                    </div>
                    <!--end edit-->
                    
                    <div class="table-cell width_290" ng-class="{'last':$last}" style="width: 210px;">
                        <div ng-if="item.isAccesible">
                            <a href="#/research/overview/{{item.companyNameUrlFriendly}}">{{item.matchedInfo.companyName}}</a>
                        </div>

                        <div ng-if="!item.isAccesible">
                            {{item.matchedInfo.companyName}}
                        </div>

                    </div>
                    <div class="table-cell width_130" ng-class="{'last':$last}" style="width: 210px;">
                        {{item.matchedInfo.capitalIQId}}
                        <!--<div ng-repeat="isin in item.isiNs">
                </div>-->
                    </div>

                    <div class="table-cell width_290" ng-class="{'last':$last}" style="width: 210px;">

                        {{item.displayInfo.accessDetails}}
                    </div>
                    <div class="table-cell center-align width_130" ng-class="{'last':$last}" style="width: 60px;">
                        <button class="delete-sel-large" ng-disabled="!portfolioOverview.portfolio.isMyPortfolio || portfolioOverview.portfolio.isSystemPortfolio" ng-click="portfolioOverview.deletePortfolioCompany(item.id)"></button>
                    </div>
                </div>
            </div>
            <div class="clear">&nbsp;</div>
            <sustainalytics-pager></sustainalytics-pager>
        </div>
    </div>
</div>